<template>
	<view class="gy-upload-idcards">
		<view 
			v-if="['all', 'front', 'noHand'].indexOf(props.mode) !== -1" 
			class="gy-upload-idcards-item" 
			:style="{height: height + 'px'}" 
			@click.stop="chooseImageFn('front')">
			<image
				 v-if="['all', 'front', 'noHand'].indexOf(props.mode) !== -1 ? props.modelValue[0] : props.modelValue"
				class="image" 
				:src="['all', 'front', 'noHand'].indexOf(props.mode) !== -1 ? props.modelValue[0] : props.modelValue"></image>
			<image 
				v-if="['all', 'front', 'noHand'].indexOf(props.mode) !== -1 ? !props.modelValue[0] : !props.modelValue" 
				class="default" 
				:src="config.imgURL + 'db14a6b21c19e8802441e513c7fe14d92b2d1b1fc002a04830330a50f37ef55f.png'"></image>
			<view v-if="['all', 'front', 'noHand'].indexOf(props.mode) !== -1 ? !props.modelValue[0] : !props.modelValue" class="icon gy_icon_photoUpload"></view>
			<view v-if="['all', 'front', 'noHand'].indexOf(props.mode) !== -1 ? !props.modelValue[0] : !props.modelValue" class="text">上传身份证人像面</view>
		</view>
		<view
			v-if="['all', 'back', 'noHand'].indexOf(props.mode) !== -1"
			class="gy-upload-idcards-item" 
			:style="{height: height + 'px'}" 
			@click.stop="chooseImageFn('back')">
			<image
				 v-if="['all', 'back', 'noHand'].indexOf(props.mode) !== -1 ? props.modelValue[1] : props.modelValue"
				class="image" 
				:src="['all', 'back', 'noHand'].indexOf(props.mode) !== -1 ? props.modelValue[1] : props.modelValue"></image>
			<image 
				v-if="['all', 'back', 'noHand'].indexOf(props.mode) !== -1 ? !props.modelValue[1] : !props.modelValue" 
				class="default" 
				:src="config.imgURL + 'fdff554d8162df202c63c5aca4e5ba74f8ca56dd9d75b80eec26adadd99882d1.png'"></image>
			<view v-if="['all', 'back', 'noHand'].indexOf(props.mode) !== -1 ? !props.modelValue[1] : !props.modelValue" class="icon gy_icon_photoUpload"></view>
			<view v-if="['all', 'back', 'noHand'].indexOf(props.mode) !== -1 ? !props.modelValue[1] : !props.modelValue" class="text">上传身份证国徽面</view>
		</view>
		<view 
			v-if="['all', 'hand'].indexOf(props.mode) !== -1"
			class="gy-upload-idcards-item" 
			:style="{height: height + 'px'}" 
			@click.stop="chooseImageFn('hand')">
			<image
				 v-if="['all', 'hand'].indexOf(props.mode) !== -1 ? props.modelValue[2] : props.modelValue"
				class="image" 
				:src="['all', 'hand'].indexOf(props.mode) !== -1 ? props.modelValue[2] : props.modelValue"></image>
			<image 
				 v-if="['all', 'hand'].indexOf(props.mode) !== -1 ? !props.modelValue[2] : !props.modelValue"
				class="default" 
				:src="config.imgURL + '54f2a1147108c60cf49ac8b04fd1c494bceca0d109b12f51030f0783fa89e1c1.png'"></image>
			<view v-if="['all', 'hand'].indexOf(props.mode) !== -1 ? !props.modelValue[2] : !props.modelValue" class="icon gy_icon_photoUpload"></view>
			<view v-if="['all', 'hand'].indexOf(props.mode) !== -1 ? !props.modelValue[2] : !props.modelValue" class="text">上传手持身份证人像面</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from "vue";
	
	import {
		upload
	} from "@/request/apis/file.js";
	
	import config from "@/config/index.js";
	
	const { proxy }: any = getCurrentInstance();
	
	const emits = defineEmits(["update:modelValue"]);
	
	const props = defineProps({
		modelValue: {
	        type: [Array, String]
	    },
	    mode: {
	        type: String,
			default: "all"
	    },
		page: {
			type: Object
		}
	});
	
	const width = ref(175);
	const height = ref(100);
	
	function chooseImageFn(type: string){
		uni.setStorageSync("is-choose-location", 0);
		uni.chooseImage({
			count: 1,
			success: (res: any) => {
				if(res.errMsg === "chooseImage:ok"){
					upload(res.tempFilePaths[0], (progress: number) => {
						if(progress < 100 ){
							props.page?.loading.show("已上传 " + progress + "%");
						}else{
							props.page?.loading.show("保存中");
						}
					}).then((response: any) => {
						if(props.mode === "all" || props.mode === "noHand"){
							let arr = JSON.parse(JSON.stringify(props.modelValue));
							if(type === "front"){
								arr[0] = response;
							}
							if(type === "back"){
								arr[1] = response;
							}
							if(type === "hand"){
								arr[2] = response;
							}
							emits("update:modelValue", arr);
						}else{
							emits("update:modelValue", response);
						}
						props.page?.loading.hide();
					}).catch((error: any) => {
						proxy.utils.log.error(error.toString());
						props.page?.loading.hide();
					});
				}
			}
		});
	}
	
	onMounted(() => {
		// #ifdef H5
		uni.createSelectorQuery().selectAll(".gy-upload-idcards-item").boundingClientRect((childs: any)=>{
			childs.forEach((item: any) => {
				width.value = item.width;
				height.value = item.width / 3 * 2;
			});
		}).exec();
		// #endif
		
		// #ifdef MP-WEIXIN
		proxy.createSelectorQuery().selectAll(".gy-upload-idcards-item").boundingClientRect((childs: any)=>{
			childs.forEach((item: any) => {
				width.value = item.width;
				height.value = item.width / 3 * 2;
			});
		}).exec();
		// #endif
		
	})
	
</script>

<style lang="scss" scoped>
	.gy-upload-idcards{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--gy-gap);
		.gy-upload-idcards-item{
			position: relative;
			@include flex-center-center;
			flex-direction: column;
			border: 1rpx dashed var(--gy-card-line-color);
			border-radius: var(--gy-border-radius-large);
			.image{
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
				width: 100%;
				height: 100%;
				display: block;
			}
			.default{
				position: absolute;
				top: 30rpx;
				left: 30rpx;
				z-index: 0;
				width: 80%;
				height: 60%;
				display: block;
			}
			.icon{
				margin-top: 30rpx;
				z-index: 1;
				width: 80rpx;
				height: 80rpx;
				@include flex-center-center;
				border-radius: 50%;
				background-color: var(--gy-color-primary);
				color: #ffffff;
				font-size: var(--gy-font-size-large);
				box-shadow: 0px 6rpx 12rpx #B0CBFF;
			}
			.text{
				z-index: 1;
				margin-top: 25rpx;
				font-size: var(--gy-font-size-small);
				color: var(--gy-text-color-secondary);
			}
		}
	}
</style>